<template>
    <div :class="headType">
        <!-- 一般情况下的头部 -->
        <div class="header isc-row row-center row-between" v-show="headType=='default'">
            <div class="nav-left">
                <div class="isc-row row-center-wrapper">
                    <Button @mouseover="switchMenu(true)" type="primary" class="btn-nav">
                        <a-icon style="color: #ff6600;" type="menu"/>
                    </Button>
                    <a href="/" class="logo"><img src="../src/assets/image/saas_logo.svg" alt=""></a>
                </div>

            </div>
            <div class="nav-right c-flex c-col-center">
                <div class="search">
                    <div class="search-wrapper">
                        <div class="search-area" v-clickoutside="searchClickOutSide" @click="activeSearchPop(!headerSearchActived)">
                            <div class="search-area-inner" :class="{'active':headerSearchActived==true}">
								<span class="search-area-icon">
									<a-icon type="search" class="icon"></a-icon>
								</span>
                                <span class="search-area-input">
									<input type="text" aria-autocomplete="none" placeholder="搜索文档、控制台、API、解决方案和资源"
                                           class="input" value="">
								</span>
                            </div>
                        </div>
                        <div :class="{'search-pop':headerSearchActived==false,'search-pop-active':headerSearchActived==true}">
                            <div class="search-pop-wrapper">
                                <div class="search-pop-inner">
                                    <div class="search-pop-content">
                                        <div class="search-pop-item">
                                            <h5>最近访问的功能</h5>
                                            <div class="item">没有找到相关内容</div>
                                        </div>
                                        <div class="search-pop-item">
                                            <h5>关注更多功能</h5>
                                            <a href="/serves">咨询服务创建</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a-menu v-model="current" mode="horizontal">
                    <a-menu-item class="menu-item" :key="index" v-for="item,index in headerRightCategories">
                        <a-dropdown v-if="item.children">
                            <a-button class="colorFFF" type="link" size="small">{{item.title}}</a-button>
                            <a-menu slot="overlay">
                                <a-menu-item :key="child.title" v-for="child in item.children" @click="handleFunClick(child)">
                                    {{child.title}}
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                        <a-button v-else class="colorFFF" type="link" size="small" @click="handleFunClick(item)">
                            <span v-if="item.iconMode==true"><a-icon class="colorFFF" :type="item.icon"></a-icon></span>
                            <span v-else>{{item.title}}</span>
                        </a-button>
                    </a-menu-item>
                    <a-menu-item class="menu-item" key="ctr">
                        <a-dropdown>
                            <a-menu slot="overlay" @click="handleMenuClick">
                                <!-- <a-menu-item key="1">
                                    登录
                                </a-menu-item> -->
                                <a-menu-item key="2">
                                    个人信息
                                </a-menu-item>
                                <a-menu-item key="3">
                                    退出
                                </a-menu-item>
                            </a-menu>
                            <a-avatar :src="vuex_user.icon">
                                <!-- <a-icon class="avatar" slot="icon" type="user"/> -->
                            </a-avatar>
                        </a-dropdown>
                    </a-menu-item>
                </a-menu>
            </div>
        </div>
        <div class="" :class="{'base-menu-wrapper-show':menuShow==true,'base-menu-wrapper':menuShow==false}">
            <aside class="" :class="{'base-menu-container-show':menuShow==true,'base-menu-container':menuShow==false}">
                <div class="base-menu-pane">
                    <div>
                        <div class="base-menu-pane">
                            <Button class="base-menu-title-button"
                                    :class="{'hidden':mainPaneShow==false,'show':mainPaneShow==true}"
                                    @click="showSubBaseMenu(!mainPaneShow)">
								<span class="isc-row row-center-wrapper">
									<span class="btn-child">
										<span class="isc-row row-center-wrapper">
											<span class="btn-in-side">
												<a-icon type="menu"></a-icon>
											</span>
											<span class="btn-in-side-txt">
												所有功能
											</span>
										</span>
									</span>
									<span class="btn-pane">
										<a-icon type="right" style="color:rgb(222,222,222);"></a-icon>
									</span>
								</span>
                            </Button>
                            <div class="funList">
                                <div>
                                    <a :href="_fun.link" class="fun-item-link" v-for="_fun in menuFuns">
										<span class="isc-row row-center-wrapper">
											<span class="btn-child">
												<span class="isc-row row-center-wrapper">
													<span class="btn-in-side">
														<a-icon :type="_fun.icon"></a-icon>
													</span>
													<span class="btn-in-side-txt">
														{{_fun.title}}
													</span>
												</span>
											</span>
										</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>
            <div class="" :class="{'mainPane-show':mainPaneShow==true&&menuShow==true,'mainPane':mainPaneShow==false}">
                <div class="mainPane-container isc-row">
                    <div class="mainPane-left">
                        <div class="product-filter">
                            <div class="product-filter-search-input">
								<span class="search-input-icon">
									<a-icon type="search"></a-icon>
								</span>
                                <span class="search-input-text">
									<input type="text" aria-autocomplete="none" placeholder="请输入关键词" maxlength="32"
                                           class="search-input-input">
								</span>
                            </div>
                        </div>
                        <div class="product-recent-and-all">
                            <div class="products-recent">
                                <h4 class="title">最近访问</h4>
                                <a-row>
                                    <a-col :span="8">2222222</a-col>
                                    <a-col :span="8">3333333</a-col>
                                    <a-col :span="8">4444444</a-col>
                                </a-row>
                            </div>
                            <div class="product-filter-summary"></div>
                            <div class="products-grouped">
                                <div class="product-group" :class="{'active':activedCategory==index}"
                                     v-for="category,index in menuCategories">
                                    <h4 class="title">{{category.title}}
                                    </h4>
                                    <div class="_product-item" v-for="child in category.children">
                                        <Button class="link" @click="handleFunClick(child)">{{child.title}}</Button>
                                        <Button class="product-button" title="加入收藏">
                                            <a-icon type="star"/>
                                        </Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mainPane-right">
                        <div class="fun-categories">
                            <Button class="category-button" :key="index" :class="{'active':activedCategory==index}" size="small"
                                    v-for="category,index in menuCategories" @click="goCategory(index)">
                                {{category.title}}
                            </Button>
                        </div>
                    </div>
                </div>
                <Button class="mainPane-container-close" @click="showSubBaseMenu(!mainPaneShow)">
                    <a-icon type="close"></a-icon>
                </Button>
            </div>
            <div class="" @click="switchMenu(false)"
                 :class="{'base-mask-show':menuShow==true,'base-mask':menuShow==false}"></div>
        </div>
        <!-- login的头部 -->
        <div class="header" v-show="headType=='login'">
            <div class="center c-flex c-col-center">
                <img class="logo" src="../src/assets/image/saas_logo.svg" alt="">
            </div>
        </div>
        <!-- 创建的场景下的头部 -->
        <section class="ingi-topbar" v-show="headType=='new'">
            <section class="ingi-topbar-header">
                <section class="ingi-topbar-element ingi-logo">
                    <a href="/" class="ingi-logo-link"><img src="../src/assets/image/logo_orginal.svg" alt=""></a>
                </section>
                <section class="ingi-topbar-tool"></section>
                <section class="ingi-topbar-element ingi-ability">
                    <a-menu mode="horizontal">
                        <a-menu-item class="menu-item" key="m1">工具集</a-menu-item>
                        <a-sub-menu>
                            <span slot="title" class="menu-item">社工姓名</span>
                        </a-sub-menu>
                    </a-menu>
                </section>
            </section>

        </section>
    </div>
</template>

<script>
    import {Modal} from "ant-design-vue";
    export default {
        name: 'toubu',
        props: {
            //数据
            headType: {
                type: String,
                default() {
                    return 'default'//default一般情况下,new 创建的场景下 login 登录情况下
                }
            },
        },
        //自定义指令
        directives: {
            clickoutside: {
                bind(el, binding, vnode) {
                    function documentHandler(e) {
                        // 这里判断点击的元素是否是本身，是本身，则返回
                        if (el.contains(e.target)) {
                            return false;
                        }
                        // 判断指令中是否绑定了函数
                        if (binding.expression) {
                            // 如果绑定了函数 则调用那个函数
                            binding.value(e);
                        }
                    }
                    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
                    el.__vueClickOutside__ = documentHandler;
                    document.addEventListener('click', documentHandler);
                },
                update() {},
                unbind(el, binding) { // 解除事件监听
                    document.removeEventListener('click', el.__vueClickOutside__);
                    delete el.__vueClickOutside__;
                }
            }
        },
        data() {
            return {
                current: [],
                headerRightCategories:[
                    {
                        title:'机构',
                        route:{},
                        iconMode:false,
                        icon:'',
                        children:[
                            {
                                title:'机构设置',
                                route:{name:'organization_setting'}
                            },
                            {
                                title:'员工管理',
                                route:{name:'organization_employee'}
                            }
                            ],
                    },
                    {
                        title:'问答',
                        route:{},
                        iconMode:false,
                        icon:'',
                        children:[],
                    },
                    {
                        title:'支持',
                        route:{},
                        iconMode:false,
                        icon:'',
                    },
                    {
                        title:'',
                        route:{},
                        iconMode: true,
                        icon:'bell',
                    }
                ],
                headerSearchActived: false,
                menuShow: false,
                mainPaneShow: false,
                activedCategory: '-1',
                menuFuns: [
                    {icon: 'api', title: '咨询创建', link: '/serves'},
                    {icon: 'bulb', title: '个案开案', link: '/userView'},
                    {icon: 'book', title: '对象档案', link: '#'},
                    {icon: 'cloud', title: '根据用户最多访问', link: '#'},
                    {icon: 'car', title: '按频率降序显示功能导航', link: '#'}
                ],
                menuCategories: [
                    {
                        title: '项目管理',
                        id: 'fun_a',
                        children: [
                            {title: '我参与的项目',route:{name: 'project_list',params:{type:'mine'}}},
                            {title: '待处理事件', route:{name: 'project_event',params:{type:'analysis'}}},
                            {title: '操作记录', route:{name: 'project_event',params:{type:'history'}}},
                            {title: '项目数据汇总', route:{name: 'project_analysis', params:{type:'analysis'}}}
                        ]
                    },
                    {title: '服务对象个人档案', id: 'fun_b', children: [
                            {title:'查看列表',route:{name:"case_management_list"}},
                            {title:'创建',route:{type:'link',name:"case_management_create"}},
                            {title:'敏感个案',route:{name:"case_management_list",query:{mode:'sensitive'}}},
                        ]
                    },
                    {title: '服务档案 - 咨询', id: 'fun_c', children:[
                            {title:'查看列表',route:{name:"service_enquiry_list"}},
                            {title:'创建',route:{type:'link',name:"service_enquiry_create"}},
                            {title:'审核情况',route:{path:''}},
                            {title:'转介',route:{path:''}},
                        ]
                    },
                    {title: '服务档案 - 个案', id: 'fun_d', children:[
                            {title:'查看列表',route:{name:"service_case_list"}},
                            {title:'创建',route:{type:'link',name:"service_case_create"}},
                            {title:'审核情况',route:{name:''}},
                            {title:'转介',route:{name:''}},
                        ]
                    },
                    {title: '服务档案 - 定期探访', id: 'fun_e', children:[
                            {title:'查看列表',route:{name:"service_regular_home_visit_list"}},
                            {title:'创建',route:{type:'link',name:"service_regular_home_visit_create"}},
                            {title:'审核情况',route:{path:''}},
                            {title:'转介',route:{path:''}},
                        ]
                    },
                    {title: '服务档案 - 危机介入', id: 'fun_f', children:[
                            {title:'查看列表',route:{name:"service_crisis_intervention_list"}},
                            {title:'创建',route:{type:'link',name:"service_crisis_intervention_create"}},
                            {title:'审核情况',route:{path:''}},
                            {title:'转介',route:{path:''}},
                        ]
                    },
                    {title: '服务记录资源库', id: 'fun_f', children:[
                            {title:'服务对象填写表格',route:{name:'service_resource_template'}},
                            {title:'特定情况需求评估指引',route:{name:'service_resource_guide'}},
                        ]
                    },
                    {title: '服务数据汇总', id: 'fun_f', children:[
                            {title:'服务数据输出',route:{path:''}},
                            {title:'工作报表输出',route:{path:''}},
                        ]
                    },
                    {title: '审核', id: 'fun_g', children: [
                            {title:'审核记录',route:{}},
                        ]
                    },
                    {title: '系统设置', id: 'fun_g', children: [
                            {title:'我的资料',route:{name:'user_center_profile'}},
                        ]}
                ]
            }
        },
        watch: {},
        methods: {
            onSearch() {

            },
            switchMenu(status) {
                this.menuShow = status;
                if (!status) {
                    this.mainPaneShow = false;
                }
            },
            showSubBaseMenu(status) {
                this.mainPaneShow = status;
            },
            activeSearchPop(status) {
                this.headerSearchActived = status;
            },
            searchClickOutSide(){
                this.headerSearchActived=false;
            },
            goCategory(index) {
                this.activedCategory = index;
            },
            handleFunClick(item) {
                /**
                 * 改部分的交互效果需要帮忙搞定，目前的效果有问题
                 * 具体交互效果为：点击设置了type为link的按钮之后，关闭所有菜单，弹出一个提示对话框，要求用户在新开的页面内完成操作
                 *
                 **/
                if(item.route.type=='link'){
                    let redirectData = this.$router.resolve({name:item.route.name}),that=this;
                    const h = this.$createElement;
                    this.$info({
                        title: '请在新打开的页面内完成操作',
                        content: h('div', {}, [
                            h('p', 'some messages...some messages...'),
                            h('p', 'some messages...some messages...'),
                        ]),
                        okText: '我已完成资料创建',
                        cancelText: '取消',
                        onOk() {
                            that.$notification.info({ message:'刷新列表区域的数据' })
                        },

                    });
                    window.open(redirectData.href,'_blank');
                }
                else if(item.route.name)
                    this.$router.push({name:item.route.name,params:item.route.params,query:item.route.query});
                else
                    this.$router.push({path:item.route.path,query:item.route.query});
                this.switchMenu(false);
                this.activeSearchPop(false);
            },
            handleMenuClick(item) {
                if (item.key === '1') {
                    // 登录页面
                    this.$router.push("/login")
                } else if (item.key === '2') {
                    this.$router.push({name:'user_center_profile'});
                    // 查看个人信息,暂时没有
                    /*
                    this.$notification.open({
                        message: '功能未开放',
                        description:
                            '抱歉，此功能暂未开放，我们将在后续工作中完成此功能',
                        icon:<a-icon type = "smile" style = "color: #108ee9" / >,
                    });
                     */
                } else if (item.key === '3') {
                    // 退出登录，暂时只做前端退出 删除添加到localStorage中的数据，到登录页面
                    localStorage.removeItem('Authorization');
                    localStorage.removeItem('user');
                    localStorage.removeItem('roleId');
                    this.$router.push("/login");
                }
            }
        }
    }
</script>

<style>
    .colorFFF {
        color: #fff !important;
    }
</style>
